<template>
  <!-- 各类文章汇总详情
+'&type='+i额外传值
 -->
  <div class="box auton">
    <!-- 面包屑 -->
    <!-- 导航条以及外壳 -->
    <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
      <a-breadcrumb separator=">">
        <a-breadcrumb-item href="/" @click.native="$router.push('/')"
          >首页</a-breadcrumb-item
        >
        <a-breadcrumb-item
          v-if="from == 3 || from == 4"
          :href="homeUrl"
          @click.native="$router.push(homeUrl)"
        >
          {{ homeTxt }}
        </a-breadcrumb-item>
        <a-breadcrumb-item
          v-if="from == 2 || from == 3 || from == 4"
          :href="Listurl"
          @click.native="$router.push(Listurl)"
        >
          {{ txtlist }}
        </a-breadcrumb-item>
        <a-breadcrumb-item style="color: #FFBE37"
          >{{ txtType }}详情</a-breadcrumb-item
        >
      </a-breadcrumb>
    </div>

    <!-- 内容 -->
    <div class="frame">
      <div class="left">
        <Details
          style="min-height: calc(100vh - 250px)"
          :detailDate="detailDate"
        />
        <!-- 伪分页 -->
        <ul v-if="ifFlag" class="paging">
          <li v-if="detailDate.preNews" @click="noGodetail(detailDate.preNews)">
            上一篇：<span>{{ detailDate.preNews.title }}</span>
          </li>
          <li
            v-if="detailDate.nextNews"
            @click="noGodetail(detailDate.nextNews)"
          >
            下一篇：<span>{{ detailDate.nextNews.title }}</span>
          </li>
        </ul>
        <!-- 通知公告 - 文件展示 -->
        <div
          v-show="'通知公告' == txtType && detailDate.pubFilesList"
          class="enclosure"
        >
          <div class="special-top">
            <div class="box1"></div>
            <span class="txt1">附件下载：</span>
            <div class="special-conter">&nbsp;</div>
            <div class="special-top-right">
              <span class="txt3"><a @click="downLoad()">全部下载</a> </span>
            </div>
          </div>
          <ul>
            <li v-for="(item, index) in detailDate.pubFilesList" :key="index">
              <a :href="imgUrl + item.fileUrl">{{ item.fileName }}</a>
            </li>
          </ul>
        </div>
      </div>
      <div
        class="right"
        v-show="(txtType == '新闻资讯' || txtType == '新闻列表') && detailDate.recommendList && detailDate.recommendList.length"
      >
        <div class="layer" style="background-color: #fff; padding: 0 30px 30px">
          <div class="titleH4"><img src="@/assets/image/employment/star.png" alt=""> 热门新闻</div>
          <!-- 新闻列表 -->
          <div>
            <PictureBox
              :config="{
                width: 100,
                height: 80,
                cover: item.cover,
                src: '404.png',
                marginLeft: 16,
              }"
              v-for="(item, index) in detailDate.recommendList"
              :key="index"
              class="PictureBox"
            >
              <h4 class="title" @click="noGodetail(item)">
                {{ item.title }}
              </h4>
            </PictureBox>
          </div>
        </div>
      </div>
    </div>
<!--    <Loading v-show="onLoading"></Loading>-->
  </div>
</template>

<script>
import PictureBox from "@/components/news/PictureBox.vue";
import Details from "@/components/news/details.vue";
// import config from "@/plugins/config.js";

// const thisDetailDate = {}
export default {
  components: {
    PictureBox,
    Details,
  },
  data() {
    return {
      //类别列表
      categoryList: [
        {
          src: "/ganbu/special",
          name: "专题培训",
          title: "",
        },
        {
          src: "/ganbu/selectedCases",
          name: "案例精选",
          title: "",
        },
        {
          src: "/kangfu/RSPopularization",
          link: "",
          name: "康复科普",
          title: "",
        },
        {
          src: "/rightsProtection/rightsProtection",
          name: "真实事件",
          link: "",
          title: "",
        },
        {
          src: "/all/noticeAnnouncement",
          name: "通知公告",
          title: "",
        },
        {
          src: "/ganbu/ganbuCollege",
          name: "干部学院",
          link: "",
          title: "",
        },
        {
          src: "/kangfu/rehabilitationServices",
          name: "康复服务",
          link: "",
          title: "",
        },
        {
          src: "/education",
          name: "教育培训",
          link: "",
          title: "",
        },
      ],
      //
      detailDate: {},
      urlTxt: "",
      //唯一值
      // txtId: this.$route.query.id,
      from: "", // 控制面包屑
      txtId: 1,
      txtType: "新闻列表",
      // txtType: this.$route.query.type, //传输进来的
      // config,
      // 显示上一篇下一篇标志位
      ifFlag: true,
      imgUrl: "https://static.cdpservice.com",
      Listurl: "",
      homeUrl: "",
      onLoading:false
    };
  },
  computed: {
    txtlist() {
      if (this.txtType == "新闻资讯" || this.txtType == "新闻列表") {
        this.Listurl = "/NewsList?type=新闻列表&from=" + this.from;
        return "新闻列表";
      } else if (this.txtType == "通知公告") {
        this.Listurl = "/noticeList";
        return "通知公告";
      } else if (this.txtType == "科普"||this.txtType == "科普列表") {
        if(this.from == 2){
          this.Listurl = "/NewsList?type=科普列表&from=" + this.from;
        }else if(this.from == 4){
          this.Listurl = "/service/recoveryList?from=" + this.from;
        }
        return "康复科普";
      } else if (this.txtType == "案例") {
        if(this.from == 4){
          this.Listurl = "/safeguarding/caseList?type=生活维权&from=" + this.from;
        }else{
          this.Listurl = "/NewsList?type=事件列表&from=" + this.from;
        }
        return "真实案例";
      } else if (this.txtType == "文章") {
        this.Listurl = "/all/specialColumn?type=文章&from=" + this.from;
        return "新闻专栏";
      } else if (this.txtType == "创业就业" || this.txtType == "政策") {
        if(this.from == 4){
          this.Listurl = "/employment/projectList?from=" + this.from;
        }else{
          this.Listurl = "/NewsList?type=创业列表&from=" + this.from;
        }
        return "政策列表";
      } else if (this.$route.query.type == "政策解读") {
        if(this.from == 2){
          this.Listurl = "/NewsList?type=政策解读&from=" + this.from;
        }
        return "政策列表";
      }
    },
    homeTxt() {
      if (this.txtType == "科普") {
        this.homeUrl = "/service";
        return "康复服务";
      } else if (this.txtType == "案例") {
        this.homeUrl = "/safeguarding";
        return "生活维权";
      } else if (this.txtType == "创业就业" || this.txtType == "政策") {
        this.homeUrl = "/employment/home";
        return "创业就业";
      } else if (this.$route.query.type == "政策解读") {
        this.urlTxt = "/news/policyfind/get/detail?msgNo=";
      }
    },
  },
  watch: {
    $route(e) {
      this.txtId = e.query.id;
      this.from = e.query.from;
      this.txtType = e.query.type;
      this.getNewsDetail();
      this.onLoading = true
    },
  },
  methods: {
    // 获取新闻详情
    getNewsDetail() {
      this.onLoading = true
      this.$ajax({
        url: this.urlTxt + this.txtId,
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false
          if(res.data != null){
            this.detailDate = res.data;
          }
        }else{
          this.onLoading = false
        }
      });
    },
    noGodetail(item) {
      // console.log(item);
      this.$router.push(
        "/details/details?id=" +
          item.newsNo +
          "&type=" +
          this.txtType +
          "&form=" +
          this.from
      );
    },
    // 判断是否显示上下篇
    ifShow() {
      if (this.txtType == "新闻资讯" || this.txtType == '新闻列表') {
        this.ifFlag = true;
      } else {
        this.ifFlag = false;
      }
    },
  },
  mounted() {
    this.from = this.$route.query.from;
    this.txtId = this.$route.query.id;
    this.txtType = this.$route.query.type;
    if (this.$route.query.type == "通知公告") {
      this.urlTxt = "/news/newsmsg/get/detail/notice?newsNo=";
    } else if (this.$route.query.type == "新闻资讯" || this.$route.query.type == "文章" || this.$route.query.type == "新闻列表") {
      this.urlTxt = "/news/newsmsg/get/detail?newsNo=";
    } else if (this.$route.query.type == "科普" || this.$route.query.type == "康复科普" || this.$route.query.type == "科普列表") {
      this.urlTxt = "/news/healthspread/detail?sprNo=";
    } else if (this.$route.query.type == "案例" || this.$route.query.type == "首页生活维权") {
      this.urlTxt = "/news/lifesafeguard/detail?lifeSafNo=";
    } else if (this.$route.query.type == "创业就业" || this.$route.query.type == "政策") {
      this.urlTxt = "/news/msginfo/get/detail?msgNo=";
    } else if (this.$route.query.type == "政策解读") {
      this.urlTxt = "/news/policyfind/get/detail?msgNo=";
    }
    this.getNewsDetail();
    this.ifShow();
  },
};
</script>

<style lang="less" scoped>
.frame {
  padding-bottom: 20px;
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  > div {
    &.left {
      flex: 1;
      background-color: #ffffff;
      .paging {
        margin: 40px 46px;
        margin-top: 20px;
        li {
          margin-bottom: 24px;
          font-size: 16px;
          line-height: 22px;
          font-weight: 400;
          color: #333;
          cursor: pointer;
          &:hover {
            color: #EEB336;
          }
          &:last-child {
            margin-bottom: 0;
          }
          span {
            text-decoration: underline;
          }
        }
      }
    }
    &.right {
      // display: none;
      width: 340px;
      margin-left: 20px;
      .PictureBox {
        padding: 20px 0;
        border-bottom: 1px solid #e6e6e6;
        &:last-child {
          border-bottom: none;
          padding-bottom: 0;
        }
        /deep/.title {
          cursor: pointer;
          font-size: 16px;
          color: #333;
          padding-bottom: 5px;
          line-height: 30px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-align: justify;
        }
      }
    }
  }
}
// 案例样式
.special-top {
  // border-bottom: #999999 solid 1px;
  width: 100%;
  display: block;
  display: flex;
  flex-direction: row;
  align-items: center;
  .special-top-left {
    // width: 80%;
    height: 110px;
  }
  .special-conter {
    flex: 1;
  }

  .txt1 {
    display: block;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 18px;
    font-family: PingFangSC-Medium;
    white-space: nowrap;
    margin-left: 16px;
  }
  .txt2 {
    display: block;
    overflow-wrap: break-word;
    color: #a9a9a9;
    font-size: 14px;
    white-space: nowrap;
    margin-left: 14px;
    font-size: 16px;
  }
  .txt3 {
    display: block;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    white-space: nowrap;
    a {
      color: #333333;
    }
    a:hover {
      color: #ca0000;
    }
  }
  .box1 {
    z-index: 279;
    width: 3px;
    height: 22px;
    background-color: rgba(202, 0, 0, 1);
  }
}
.enclosure {
  width: 1000px;
  margin: 0 auto;
  margin-bottom: 40px;
  background-color: #f5f5f5;
  padding: 30px 30px;
  ul {
    display: block;
    margin-top: 6px;
    margin-bottom: 0em;
    li {
      line-height: 46px;
      border-bottom: #a9a9a9 dashed 1px;
      &:last-child {
        border-bottom: #f5f5f5 dashed 1px;
      }
    }
  }
  a {
    color: #333;
  }
  a:hover {
    color: #ca0000;
  }
}
.titleH4{
  width: 340px;
  margin-left: -30px;
  line-height: 40px;
  padding-left: 20px;
  font-size: 14px;
  background: #232D32;
  color: #ffffff;
  img{
    width: 20px;
    display: inline-block;
    margin-top: -5px;
  }
}
</style>
